<link rel="stylesheet" href="{{URL::asset('./css/word/wordcate.css')}}">
@extends('home.layout.base')
@section('content')
<div class="main" id="document" v-cloak>
    <div class="document_main">
        <div class="document_left">
            <div class="document_leftTitle">
                <img src="{{URL::asset('./img/index/menu.png')}}" alt="">
                <span>分类目录</span>
            </div>
            <div class="couSBg" v-for="(item,index) in listData"  @mouseenter="hoverEnter(item)" @mouseleave="hoverLeave(item)">
                <span @click=" window.location.href = '{{ route('home.word.wordList') }}?id='+item.value">
                    <img :src="item.after_icon" v-show="item.bool">
                    <img :src="item.before_icon" v-show="!item.bool"> @{{item.label}}
                </span>
                    <div v-if="item.bool  && item.children" class="couSBg_2">
                    <div class="child_left">
                        <span>
                            <i></i>
                        </span>
                        <span class="child_left_cont">
                            <header>@{{item.label}}</header>
                            <div>
                                <span :class="{active:ix==0}" v-for="(child,ix) in item.children" @click=" window.location.href = '{{ route('home.word.wordList') }}?id='+item.value+'&childId='+child.value">@{{ child.label }}</span>
                            </div>
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <div class="document_right">
            <div class="document_swiper">
                <!-- <div id="document_swiper" class="carousel slide" data-interval="5000">
                    <ol class="carousel-indicators">
                        <li data-target="#document_swiper" v-for="(item,index) in swiperData" :data-slide-to="index" :class="{active:index==0}"></li>
                    </ol>
                    <div class="carousel-inner">
                        <div class="item" :class="{active:index==0}" v-for="(item,index) in swiperData">
                            <a :href="item.link">
                                <img :src="item.thumb" alt="..."></a>
                        </div>
                    </div>
                </div> -->
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" v-for="(item,index) in swiperData">
                            {{--<a :href="item.link" style="display:block;width:100%;height:100%">--}}
                                {{--<img :src="item.thumb" alt="..." style="width:100%;height:100%">--}}
                            {{--</a>--}}
                            <a v-if="item.target!=2" :href="item.link" target="_blank" style="display:block;width:100%;height:100%">
                                <img :src="item.thumb" alt="..." style="width:100%;height:100%">
                            </a>
                            <a v-else :href="item.link" style="display:block;width:100%;height:100%">
                                <img :src="item.thumb" alt="..." style="width:100%;height:100%">
                            </a>
                        </div>
                    </div>
                    <!-- Add Pagination -->
                    <div class="swiper-pagination"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="document_content">
        <div class="document_content_left">
            <div class="hotDownload">
                <div class="hotDownload_header">
                    <span>热门下载</span>
                    <a href="{{route('home.word.wordList')}}">查看更多 ></a>
                </div>
                <div class="hotDownload_content">
                    <div class="contentDiv" v-for="(item,index) in hotArr" :key="index" v-if="index < 6" @click=" window.location.href = '{{ route('home.word.wordDetails') }}?id='+item.id">
                        <img :src="item.thumb">
                        <div class="worDcont">
                            <p class="titleWord">@{{item.title}}</p>
                            <p class="contentWord">文档类型：@{{item.cate_pid}}--@{{item.cate_id}}</p>
                            <div class="msgCont">
                                <p>浏览  @{{item.view}}</p>
                                <p>下载  @{{item.download}}</p>
                                <p>格式  .@{{item.format}}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="hotDownload" style="margin-top:20px;">
                <div class="hotDownload_header">
                    <span>最新上传</span>
                    <a href="{{route('home.word.wordList')}}">查看更多 ></a>
                </div>
                <div class="hotDownload_content">
                    <div class="contentDiv" v-for="(item,index) in newArr" :key="index" v-if="index < 6" @click=" window.location.href = '{{ route('home.word.wordDetails') }}?id='+item.id">
                    <img :src="item.thumb">
                        <div class="worDcont">
                            <p class="titleWord">@{{item.title}}</p>
                            <p class="contentWord">文档类型：@{{item.cate_pid}}--@{{item.cate_id}}</p>
                            <div class="msgCont">
                                <p>浏览  @{{item.view}}</p>
                                <p>下载  @{{item.download}}</p>
                                <p>格式  .@{{item.format}}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="document_content_right">
            <div class="rapidRelease" @mouseleave="QRcodeDialog=false">
                <div class="rapidRelease_header">
                    <span>快速发布需求</span>
                    <span>众多商家主动参与，轻松挑选满意方案！</span>
                </div>
                <div class="rapidRelease_input">
                    <el-form :model="form" ref="ruleForm">
                        <el-form-item prop="tel" :rules="telRule">
                            <el-input v-model="form.tel" type="text" placeholder="您的手机号" />
                            </el-input>
                        </el-form-item>
                    </el-form>
                    <button @click="submitForm('ruleForm')">
                        立即发布
                    </button>
                </div>
                <div class="rapidRelease_right">
                </div>
                <div class="rapidRelease_QRcode" v-show="QRcodeDialog">
                    <span>扫码进入微信公众号</span>
                    <span>手机快捷发布</span>
                    <img :src="overall.public_code">

                </div>
                <img @mouseenter.stop="QRcodeDialog=true" src="{{URL::asset('./img/store/rapidRelease_right.png')}}" class="rapidRelease_rightImg">
            </div>
            <div class="publicityImg" v-for="(item,index) in publicityImgArr">
                {{--<a :href="item.link">--}}
                    {{--<img :src="item.thumb" alt="..."></a>--}}
                <a v-if="item.target!=2" :href="item.link" target="_blank">
                    <img :src="item.thumb">
                </a>
                <a v-else :href="item.link">
                    <img :src="item.thumb">
                </a>
            </div>
        </div>
    </div>
</div>
@endsection
@section('scripts')
<script>
    $(() => {
        let app = new Vue({
            el: '#document',
            data() {
                return {
                    swiperData: [],
                    listData: [],
                    hotArr: [],
                    newArr: [],
                    QRcodeDialog: false,
                    form: {
                        tel: '',
                    },
                    telRule: [{
                        required: true,
                        validator: validateTel,
                        trigger: 'blur'
                    }],
                    publicityImgArr: [],
                    overall: JSON.parse(sessionStorage.getItem("overall")) || {},
                }
            },
            created() {
                let userName=JSON.parse(sessionStorage.getItem("HRuserDetails"));
                if (userName!=undefined&&userName.type!=2) {
                // if (sessionStorage.getItem("HRuserDetails")) {
                    this.form.tel = JSON.parse(sessionStorage.getItem("HRuserDetails")).mobile;
                } else {
                    this.form.tel = '';
                };
                this.getSwiper();
                this.getList();
            },
            mounted() {},
            methods: {
                hoverEnter(item) {
                    item.bool = true;
                },
                hoverLeave(item) {
                    item.bool = false;
                },
                getSwiper() {
                    let data = {
                        adsense_id: 24
                    }
                    apiAjax("{{ route('home.public.advs')}}", 'get', data, (res) => {
                        if (res.code == 0) {
                            this.swiperData = res.data;
                            // $('.carousel').carousel('cycle');
                            this.$nextTick(()=>{
                                var swiper = new Swiper('.swiper-container', {
                                    pagination: {
                                        el: '.swiper-pagination',
                                        clickable: true,
                                    },
                                    loop: true,
                                    autoplay:true,
                                    autoplayDisableOnInteraction : false,
                                });
                            })
                        } else {
                            this.$message({
                                message: res.msg,
                                type: 'warning'
                            });
                        }
                    }, (erro) => {

                    });
                    //右侧广告栏
                    apiAjax("{{ route('home.public.advs')}}", 'get', {
                        adsense_id: 25
                    }, (res) => {
                        if (res.code == 0) {
                            this.publicityImgArr = res.data;
                        } else {
                            this.$message({
                                message: res.msg,
                                type: 'warning'
                            });
                        }
                    }, (erro) => {

                    });
                },
                getList() {
                    let data = {}
                    apiAjax("{{ route('home.word.wordCatesApi')}}", 'get', data, (res) => {
                        if (res.code == 0) {
                            this.listData = res.data.word_cate;
                            this.hotArr = res.data.word_hot;
                            this.newArr = res.data.word_new;
                        } else {
                            this.$message({
                                message: res.msg,
                                type: 'warning'
                            });
                        }
                    }, (erro) => {

                    });
                },

                submitForm(formName) {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            let data = {
                                mobile: this.form.tel
                            }
                            apiAjax("{{ route('home.public.hrQuickDemandApi')}}", 'post', data, (res) => {
                                if (res.code == 0) {
                                    this.$message({
                                        message: res.msg,
                                        type: 'success'
                                    });
                                } else {
                                    this.$message({
                                        message: res.msg,
                                        type: 'warning'
                                    });

                                }
                            }, (erro) => {

                            });
                        } else {
                            return false;
                        }
                    });
                },
            }
        })
    })
</script>
@endsection